<template>
  <div>
    <div>
      <el-form :inline="true" :model="searchForm" class="searchForm" ref="searchRef" >
    <el-form-item label="账号" prop="id">
      <el-input   placeholder="账号" v-model="searchForm.id"/>
    </el-form-item>
    <el-form-item label="姓名" prop="name">
      <el-input v-model="searchForm.name" placeholder="姓名" />
    </el-form-item>
    <el-form-item label="手机号" prop="tel">
      <el-input v-model="searchForm.tel" placeholder="手机号" />
    </el-form-item>
    <el-form-item label="角色" prop="user_group">
      <el-select v-model="searchForm.user_group" placeholder="选择角色">
        <el-option label="全部" value="" />
        <el-option :label="item.name" :value="item.id"  v-for="item in roleList" :key="item.id"/>
        
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="getStaff()">搜索</el-button>
    </el-form-item>
    <el-form-item>
      <el-button   @click="reset()" >重置</el-button>
    </el-form-item>
  </el-form>
    </div>
    <div><el-button @click="showAdd=true">新增</el-button></div>

    <div class="row">
      <div v-for="item in staffList" :key="item.id" class="card">
        <div class="header">
        <div class="del" @click="toDel(item)">&times;</div>
          <img :src="item.avatar" width="100" />
          <div class="toEdit" @click="toEdit(item)"> <el-icon :size="size" :color="color">  <Edit /> </el-icon></div>
        </div>
        <div class="names">
          <span class="role"><el-icon>
              <Avatar />
            </el-icon>{{ roleObj[item.user_group] }}</span>
          <span class="nickname"><el-icon>
              <UserFilled />
            </el-icon> {{ item.name }}</span>
        </div>
        <div class="info">
          <div>手机号:{{ item.tel }}</div>
          <div>场馆:{{}}</div>
          <div>注册时间:{{ formatDay(item.lastTime)}}</div>
        </div>
      </div>

    </div>
     
    <el-pagination 
    @current-change="currentChange"
    background layout="prev, pager, next" :total="searchForm.total"  v-model:page-size="searchForm.size"  />
    <!-- 新增弹框开始 -->
    <el-dialog v-model="showAdd" title="添加/修改人员信息">
      <el-form   :model="addForm" class="addForm"  label-width="90" >
        <el-form-item label="登录账号" prop="name">
          <el-input  placeholder="登录账号" v-model="addForm.name"/>
        </el-form-item>
        <el-form-item label="真实姓名" prop="realname">
          <el-input v-model="addForm.realname" placeholder="姓名" />
        </el-form-item>
        <el-form-item label="手机号" prop="tel">
          <el-input v-model="addForm.tel" placeholder="手机号" />
        </el-form-item>
        <el-form-item label="角色" prop="user_group">
          <el-select v-model="addForm.user_group" placeholder="选择角色">
            <el-option label="全部" value="" />
            <el-option :label="item.name" :value="item.id"  v-for="item in roleList" :key="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="头像" prop="avatar">
          <el-upload
            class="avatar-uploader"
            action="http://dida100.com:8889/api/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"           
          >
            <img v-if="addForm.avatar" :src="addForm.avatar" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item >
        <!-- 用showEdit来区分是保存还是编辑 -->
          <el-button type="primary" @click="updateStaff" v-if="showEdit">修改</el-button>
        <el-button type="primary" @click="addStaff" v-else>保存</el-button>
        
        </el-form-item>
        
         
  </el-form>
    </el-dialog>
    <!-- 新增弹框结束 -->
  </div>
</template>
<style scoped lang="scss">
.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  color: #666;

  .card {
    width: 23%;
    border-radius: 10px;
    box-shadow: 0 0 10px #eee;
    overflow: hidden;
    margin-bottom: 15px;
    margin-right: 15px;
  }
  .card:hover .toEdit,
  .card:hover .del
  {
    display: block;
  }
  .header {
    background-color: rgb(244, 244, 176);
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
   
    .toEdit,.del{
      position: absolute;
      width:40px;
      height: 40px;
      line-height: 40px;
      border-radius: 40px;
      background-color: rgb(22, 198, 160);
      color:#fff;
      right:40px;
      bottom:-20px;
      text-align: center;
      display: none;
      cursor: pointer;
    }
    .del{
      right:0;
      top:0;
      bottom:auto;
      background-color:transparent;
      color:#f70;
    }

    img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      overflow: hidden;
      object-fit: cover;
    }
  }

  .names {
    display: flex;

    justify-content: space-between;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #eee;
    margin: 10px;

    span {
      padding: 5px;
    }

    .el-icon {
      color: gold
    }
  }

  .info {
    padding: 15px;
    padding-bottom: 35px;

    div {
      line-height: 24px;
      font-size: 12px;
    }
  }
}
/* 上传图标样式 */
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  object-fit: cover;
  display: block;
}
 
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
/* 上长图标样式ed */
</style>
<script setup>
import dayjs from 'dayjs'
import { ref } from 'vue';
import { GetStaff,GetRole,AddStaff,UpdateStaff,DelStaff } from '../../../api/system.js';
import { ElMessage, ElMessageBox } from 'element-plus'
// 定义弹框是否信息
const showAdd = ref(false);
// 定义是否显示编辑
const showEdit = ref(false);

const searchRef = ref(null);
// 搜索的条件 searchForm
const searchForm = ref({
  size: 4,
  id: '',
  name:'',
  tel:'',
  user_group:'',
});
const addForm = ref({  
  id: '',
  name:'',
  realname:'',
  tel:'',
  user_group:'',
  avatar:''  
});
// 员工列表数据 staffList
const staffList = ref([]);
// 定义变量接收所有角色
const roleList = ref([]);
// 定义角色对象
const roleObj = ref({"1":"超级管理员"});
GetRole({size:100})
.then(res => {
  var obj = res.data.data;
  roleList.value = obj;  
  // 把obj数组列表转换成对象
  for(var i=0;i<obj.length;i++){
    roleObj.value[obj[i].id] = obj[i].name;
  }
})
// 获取员工列表的方法
const getStaff = () => {
  GetStaff(searchForm.value).then(res => {
    staffList.value = res.data.data;
    searchForm.value.total = res.data.pagination.total;
    searchForm.value.size = res.data.pagination.size;
    searchForm.value.current = res.data.pagination.current;
  })
}
getStaff();
// 分页
const currentChange = (val) => {
  searchForm.value.current = val;
  getStaff();
}
// 重置
const reset = () => {
  // console.log("chongzhi");
  // searchForm.value.id = '';
  // searchForm.value.name = '';
  // searchForm.value.tel = '';
  // searchForm.value.user_group = '';
  // getStaff();
  // 重置表单
  searchRef.value.resetFields();
  getStaff();
}
// 定义格式日期的方法
function formatDay(str){
  // 包裹字符串:dayjs(str)  把字符串转换为一个dayjs的日期对象
  // 格式化 .format('YYYY-MM-DD')
  // YYYY-MM-DD HH:mm:ss
  return dayjs(str).format('YYYY-MM-DD');
  // YYYY-MM-DD HH:mm:ss
}
// 处理上传
const handleAvatarSuccess = (
  response,
  uploadFile
) => {
 console.log( response, uploadFile)
 addForm.value.avatar='http://dida100.com:8889'+response.file.path;
}
// 添加员工
const addStaff = ()=>{
  AddStaff(addForm.value)
  .then(res=>{
    if(res.data.code==0){
      alert("添加成功");
      showAdd.value = false;
      addForm.value = {  
        id: '',
        name:'',
        realname:'',
        tel:'',
        user_group:'',
        avatar:''
      }
    }else{
      alert(res.data.msg||"添加失败")
    }
  })
  .catch(err=>{
    // err.response&&err.response.data&&err.response.data.msg)
    if(err.response?.data?.msg){
      alert(err.response.data.msg);
    }
    console.log(err);
  })
}
// 定义去编辑
const toEdit = item=>{
  // 显示编辑
  showEdit.value = true;
  // 显示弹框
  showAdd.value = true;
  // 定义弹框的内容是编辑的item解构
  addForm.value = {...item};
}

// 定义修改
const updateStaff = ()=>{
  // console.log(addForm.value)
  // delete addForm.value.lastTime;
  // 日期需要格式(后端没有写好)
  addForm.value.lastTime = dayjs(addForm.value.lastTime).format("YYYY-MM-DD HH:mm:ss");
  // 把addForm传入修改
  UpdateStaff(addForm.value)
  .then(res=>{
    if(res.data.code==0){
      // 修改完重新获取最新的员工
      getStaff();
      // showEdit为false
      showEdit.value = false;
      // 隐藏弹框
      showAdd.value = false;
      // 清空addForm的值
      addForm.value = {  
        id: '',
        name:'',
        realname:'',
        tel:'',
        user_group:'',
        avatar:''
      }
    }else{
      alert("编辑失败")
    }
  })
  .catch(err=>{
    console.log(err);
    alert("失败");
  })

}
// 删除
const toDel = (item)=>{
  // 弹框对话框
  ElMessageBox.confirm('删除不可逆', '确认删除', 
  {
      confirmButtonText: '删除',
      cancelButtonText: '取消',
      type: 'warning',
    })
    // 按确定
    .then(()=>{
   
      DelStaff(item.id)
        // 返回成功http响应码 200 201 xxx
        .then(res=>{
          console.log(res,"res")
          // 状态码为0 代表删除成功
          if(res.data.code==0){
            // 弹出提示框
            ElMessage({
              type: 'success',
              message: '删除成功',
            })
            // 重新获取员工
            getStaff();
          }else{
            // 业务逻辑失败
            ElMessage({
              type: 'error',
              message: '删除失败',
            })
          }
        })
        // 返回的错误响应码 400 ,401, 500,505 xxx
        .catch((err)=>{
          console.log(err)
          ElMessage({
              type: 'error',
              message: '错误',
            })
        })
    })
    // 按的取消键
    .catch(()=>{
      
      ElMessage({
              type: 'info',
              message: '删除取消',
            })
    })
  }
    
  
 
 
</script>
